<template>
  <div class="views_BOX from_masrgin_box fontPRPS " >
    <vue-scroll ref="orderListVs" :ops="$store.state.ops">
      <div class="BOX_main">
        <!-- 订单信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">
            <span>订单信息</span>
            <span class="color_bsae" @click="goBack">返回</span>
          </div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorBlack table_item_backgroundGray FSBC">
              <div class="table_li_first">商品名称</div>
              <div class="table_li_order">价格</div>
              <div class="table_li_order">数量</div>
              <div class="table_li_order">实际支付额</div>
            </li>
            <li class="table_item FSBC"  v-for="(item, index) in orderDetail.goodsList" :key="index">
              <!-- <el-tooltip :disabled="item.name.lenth < 30" effect="light" :content="item.name" placement="bottom"> -->
                <div class="table_li_first table_li_taLeft">{{item.name}}</div>
              <!-- </el-tooltip> -->
              <div class="table_li_order">{{item.price1}}</div>
              <div class="table_li_order">{{item.num}}</div>
              <div class="table_li_order">{{item.price2}}</div>
            </li>
            <li class="table_item FSBC">
              <div class="table_li_fontBlod">订单总价：<span class="color_bsae">￥{{orderDetail.order.price}}</span></div>
            </li>
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">支付方式：{{orderDetail.order.payType | payTypeFil}} ({{orderDetail.order.payType | payTypeFil}}{{orderDetail.order.payAccount}})</div>
              <div class="table_li_lh30 table_li_taLeft">下单时间：{{orderDetail.order.orderTime | dateYMDFil}}{{orderDetail.order.orderTime | dateHFSFil}}</div>
              <div class="table_li_lh30 table_li_taLeft">付款时间：{{orderDetail.order.payTime | dateYMDFil}}{{orderDetail.order.payTime | dateHFSFil}}</div>
              <div class="table_li_lh30 table_li_taLeft">完成时间：{{orderDetail.order.overTime| dateYMDFil}}{{orderDetail.order.overTime | dateHFSFil}}</div>
            </li>
          </ul>
          <div class="BOX_main_line"/>
        </div>
        <!-- 物流信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">物流信息</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorBlack FSBC">
              <div class="table_li_fontBlod">物流单号：{{orderDetail.address.OrderId}}</div>
            </li>
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">收货人：{{orderDetail.address.receiver}}</div>
              <div class="table_li_lh30 table_li_taLeft">手机号：{{orderDetail.address.receiverMobile}}</div>
              <div class="table_li_lh30 table_li_taLeft">收货地址：{{orderDetail.address.receiverP}}{{orderDetail.address.receiverC}}{{orderDetail.address.receiverA}}</div>
            </li>
          </ul>
          <div class="BOX_main_line"/>
        </div>
        <!-- 发票信息 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">发票信息</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorBlack FSC">
              <div>名称：个人</div>
              <div class="mgl_100">纳税人识别号：76584930857658493</div>
            </li>
            <li class="table_item table_item_backgroundGray FSBC">
              <div class="table_li_first">商品名称</div>
              <div class="table_li_invoice">规格型号</div>
              <div class="table_li_invoice">单位</div>
              <div class="table_li_invoice">数量</div>
              <div class="table_li_invoice">单价</div>
              <div class="table_li_invoice">金额</div>
              <div class="table_li_invoice">税率</div>
              <div class="table_li_invoice">税额</div>
            </li>
            <li class="table_item FSBC"  v-for="(item, index) in orderDetail.goodsList" :key="index">
              <div class="table_li_first table_li_taLeft">{{item.name}}</div>
              <div class="table_li_invoice">{{item.size}}</div>
              <div class="table_li_invoice">{{item.unit}}</div>
              <div class="table_li_invoice">{{item.num}}</div>
              <div class="table_li_invoice">{{item.price1}}</div>
              <div class="table_li_invoice">{{item.price2}}</div>
              <div class="table_li_invoice">{{item.taxRate}}%</div>
              <div class="table_li_invoice">{{item.taxamount}}</div>
            </li>
            <li class="table_item FSBC">
              <div class="table_li_first table_li_taLeft">合计</div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice">{{orderDetail.order.price}}</div>
              <div class="table_li_invoice"></div>
              <div class="table_li_invoice">{{orderDetail.order.taxamount}}</div>
            </li>
            <li class="table_item FSC">
              <div>传统合计（大写）</div>
              <div class="mgl_40">{{orderDetail.order.priceA}}</div>
              <div class="mgl_100">（小写）</div>
              <div class="mgl_40">￥{{orderDetail.order.price}}</div>
            </li>
          </ul>
          <div class="BOX_main_line"/>
        </div>
        <!-- 操作历史 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">操作历史</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_colorGray table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft FSC" v-for="(item,index) in orderDetail.history" :key="index">
                <div class="w_120">
                  {{item.type | historyFil}}
                  {{item.type==1?orderDetail.order.user:orderDetail.shopName}}
                </div>
                <span class="mgl_10">
                  {{item.time | dateYMDFil}}
                  {{item.time | dateHFSFil}}
                </span>
                <span class="mgl_10">{{item.activity}}</span>
              </div>
            </li>
          </ul>
          <div class="BOX_main_line"/>
        </div>
        <!-- 维权历史 -->
        <div class="FDACC W_100">
          <div class="BOX_main_item_title FSBC">维权历史</div>
          <ul class="BOX_main_item_table">
            <li class="table_item table_item_padding FDJCC">
              <div class="table_li_lh30 table_li_taLeft">
                发生时间：
                {{orderDetail.refund.refundTime | dateYMDFil}}
                {{orderDetail.refund.refundTime | dateHFSFil}}
              </div>
              <div class="table_li_lh30 table_li_taLeft">退款编号：{{orderDetail.refund.refundId}}</div>
              <div class="table_li_lh30 table_li_taLeft">退款金额：<span class="color_bsae">￥{{orderDetail.refund.refundPrice}}</span></div>
            </li>
          </ul>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      orderDetail:{
        shopName:'伯图旗舰店',
        history:[
          {type:1,time:'1589425624000',activity:'提交订单 '},
          {type:1,time:'1589425724000',activity:'支付订单 '},
          {type:2,time:'1589425824000',activity:'发送货物 '},
          {type:1,time:'1589425924000',activity:'收取货物 '},
          {type:1,time:'1589426024000',activity:'确认订单 '},
        ],
        order:{
          user:'嘻嘻嘻',
          orderId:'ORDER178202025256987',
          price:'578.62',
          taxamount:'5.2',
          priceA:'伍佰柒拾捌元陆角贰分',
          orderTime:'1589425524000',
          payTime:'1589425624000',
          overTime:'1589427524000',
          payType:'1',
          payAccount:'17899996666',
        },
        refund:{
          refundId:'TKBH156202002021459',
          refundPrice:'88.88',
          refundTime:'1589425254000',
        },
        address:{
          receiver:'啊呀',
          receiverMobile:'17800001111',
          receiverP:'陕西省',
          receiverC:'西安市',
          receiverA:'雁塔区',
          OrderId:'977929952244519958',
        },
        goodsList:[
          {
            price1:'45.56',
            price2:'35.56',
            size:'XL',
            unit:'件',
            taxRate:'0',
            taxamount:'10',
            num:1,
            name:'AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子AAS防晒霜喷雾男女士面部防水防紫外线美白隔离脖子',
          },
          {
            price1:'415.56',
            price2:'325.56',
            size:'L',
            unit:'箱',
            taxRate:'5',
            taxamount:'19',
            num:2,
            name:'学生党军训AAS防晒霜喷雾男女士面部防水防紫外线',
          }
        ]
      },
      dialogInfo:{}
    };
  },
  created: function() {},
  mounted() {},
  computed: {},
  methods: {
    goBack(){
      this.$router.go(-1)
    }
  },
  filters: {
    payTypeFil(val){
      if(val == 0){
        return '支付宝'
      } else if(val == 1){
        return '微信'
      } else{
        return '银联'
      }
    },
    historyFil(val){
      return val==1?'买家':'卖家'
    }
  },
  watch: {}
};
</script>
<style scoped>
.BOX_main{
  height: calc(100% - 20px);
  width: calc(100% - 30px);
  padding: 20px 15px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  overflow: hidden;
  flex-direction: column;
  /* flex-wrap: wrap; */
}
/* 间隔线 */
  .BOX_main_line{
    width: 100%;
    margin: 20px 0;
    height: 1px;
    border-bottom: 1px solid #989FAD;
    border-top: 1px solid #989FAD;
  }
/* 表格标题 */
  .BOX_main_item_title{
    width: 100%;
    margin-bottom: 20px;
  }
/* 表格 */
  .BOX_main_item_table{
    width: calc(100% - 2px);
    height: 60px;
    font-size: 14px;
    font-weight:400;
    color:rgba(45,55,62,1);
    text-align: center;
    display: table;
    border: 1px solid rgba(238, 240, 245, 1);
    border-bottom: none;
  }
  /* 商品 */
    .table_item {
      padding: 0 40px;
      line-height: 60px;
      border-bottom: 1px solid rgba(238, 240, 245, 1);
    }
    .table_item_colorBlack{
      color: rgba(0,0,0,1);
    }
    .table_item_colorGray{
      color: rgb(155, 175, 175);
    }
    .table_item_backgroundGray{
      background-color: rgba(245,246,250,1);
    }
    .table_item_padding{
      padding: 10px 40px;
    }
    .table_li_first{
      width: 350px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .table_li_order{
      width: 10%;
    }
    .table_li_invoice{
      width: 60px;
    }
    .table_li_fontBlod{
      font-weight:bold;
    }
    .table_li_lh30{
      line-height:30px;
    }
    .table_li_taLeft{
      text-align: left;
    }
</style>
